<template>
    <view class="cinema_container">
        <view class="select flex">
            <navigator
                url="/pages/cinema/city/index"
                open-type="navigate"
                hover-class="navigator-hover"
            >
            {{ cityStore.city.cityId ? cityStore.city.name :'选择城市' }}
            </navigator>
            <navigator
                url="/pages/search/index"
                open-type="navigate"
                hover-class="navigator-hover"
            >
            <van-icon size="60rpx" name="search" />
            </navigator>
        </view>
        <!-- <van-cell class="select" title="选择城市" is-link url="/pages/cinema/city/index" /> -->
        <ul class="cinema-list">
            <li class="cinema-list-item" v-for="item in cinemas" :key="item.cinemaId">
                <a href="" class="cinema-list-wrap">
                    <div class="cinema-info-lf">
                        <span class="cinema-name" style="font-size: 14px;">{{ item.name }}</span>
                        <span class="cinema-address" style="font-size: 12px;">{{ item.address }}</span>
                    </div>
                    <div class="cinema-info-rt">
                        <i class="money" style="color: #ff5f16; font-size: 13px;">￥</i>
                        <span class="interge" style="font-size: 13px; color: #ff5f16;">{{ item.lowPrice / 100}}</span>
                        <!-- <span style=" color: #ff5f16; font-size: 13px;">.</span>
                        <span class="decmial" style="font-size: 13px; color: #ff5f16; ">00</span> -->
                        <span class="upon" style="font-size: 13px;color: #ff5f16;">起</span>
                        <span class="juli" style="font-size: 12px; color: #797d82;">距离未知</span>
                    </div>
                </a>
            </li>
        </ul>
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import cinema from '@/api/cinema';
import useCityStore from '@/store/city'


const cityStore = useCityStore();
const cityId = ref("110100");
const cinemas = ref<any[]>([])

async function getCinemaList(){
    cityStore.city.cityId && (cityId.value = cityStore.city.cityId!);
    try {
        let result = await cinema.getCityList(cityId.value);
        if(result && result.status === 0){
            cinemas.value = result.data.cinemas;
        }
       
    } catch (error) {
        console.error(error);
    }
}
onShow(() => {
    if(!cinemas.value.length){
        getCinemaList();
    }
})
watch(() => cityStore.city.cityId, () => {
    getCinemaList();
})
</script>

<style scoped lang="less">
.cinema_container {
    width: 750rpx;
    padding-top: 100rpx;
    .select {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        justify-content: space-between;
        padding: 0 60rpx 0 30rpx;
        font-size: 30rpx;
        color: #333;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: #fff;
    }
    .cinema-list {
        margin: 0;
        padding: 0;
    
        .cinema-list-item {
            width: 750rpx;
            height: 150rpx;
            position: relative;
            background-color: #fff;
            border-bottom: 1px solid #ededed;
            display: flex;
            display: inline-flex;
    
            .cinema-list-wrap {
                width: 100%;
                align-items: center;
                display: flex;
                display: inline-flex;
    
                .cinema-info-lf {
                    width: 520rpx;
                    height: 90rpx;
                    padding: 30rpx;
                    text-align: left;
                    float: left;
    
                    .cinema-name {
                        color: #191a1b;
                        float: left;
    
                    }
    
                    .cinema-address {
                        color: #797d82;
                        margin-top: 10rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 424rpx;
                        display: block;
                    }
                }
    
                .cinema-info-rt {
                    width: 160rpx;
                    height: 90rpx;
                    text-align: center;
                    float: right;
                    margin-right: -10rpx;
                    display: flex;
                    display: inline-flex;
                    position: relative;
    
                    .juli {
                        position: absolute;
                        bottom: 12rpx;
                        left: 10px;
                    }
                }
            }
        }
    }
}
</style>